<template>
	<view class="row-box">
		<view class="toggle-switch">
			<view v-for="(item,index) in timeList" :key="index" class="switch-button"
				:class="isActive  == index ? 'active' : 'active2'" @click="toggleSwitch(index)">
				<text>{{item}}</text>
			</view>
		</view>
		<view class="flex">	
		</view>
		<view class="openCalendar" @click="changeOpen">
			<view class="size1">
				{{computedDay}}
			</view>
			<u-icon :name="open?'arrow-up':'arrow-down'" color="#999999" size="14"></u-icon>
		</view>
	</view>
	
</template>

<script>
	export default {
		props: {
			open: {
				type: Boolean,
				default: false,
				required: true
			},
			computedDay:{
				type: String,
				default: '',
				required: true
			},
			isActive:{
				type: Number,
				default: '',
				required: true
			},
		},
		data() {
			return {
				timeList: [
					'日',
					'月',
					'年'
				]
			};
		},
		methods: {
			toggleSwitch(index) {
				this.$emit('toggleSwitch', index); // 触发自定义事件，通知父组件状态变化
			},
			changeOpen(){
				this.$emit('changeOpen')
			}
		},
	};
</script>

<style scoped lang="scss">
	.list {
		width: 22rpx;
		height: 22rpx;
		margin-right: 11rpx;
	}

	.map {
		width: 24rpx;
		height: 22rpx;
		margin-right: 11rpx;
	}

	.toggle-switch {
		display: flex;
		width: 244rpx;
		height: 72rpx;
		background: #f6f6f6;
		border-radius: 16rpx;
		overflow: hidden;
		align-items: center;
		justify-content: space-between;
		padding: 8rpx;
	}

	.switch-button {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 68rpx;
		height: 56rpx;
		background: #73F0EA;
		border-radius: 12rpx;
		font-size: 28rpx;
		transition: background-color 0.3s ease;
		font-family: PingFang SC, PingFang SC-Bold;
	}

	.active {
		background-color: #73F0EA;
		/* 激活状态的背景色 */
		color: #fff;
		font-weight: 700;
	}

	.active2 {
		background-color: #F6F6F6;
		/* 非激活状态的背景色 */
		color: #B6B6B6;
		font-weight: 400;
	}
	
	.row-box{
		width: 702rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.flex{
			flex: 1;
		}
		.openCalendar{
			height: 72rpx;
			background: #f6f6f6;
			border-radius: 12rpx;
			padding: 16rpx 24rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.size1{
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: #333333;
				margin-right: 11rpx;
			}
		}
	}
</style>